{% extends "base.html" %}

{% block BaseHead %}
    <script type="text/javascript" src="/static/js/tiny_mce/tiny_mce.js"></script>
    <script type="text/javascript" src="/static/js/gwpanels.js"></script>
    <script type="text/javascript" 
        src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAB1HE6c8mtUP2cfxsSezyExTLg_i57PFZfojJFM1YCHtnknrpaxQ3Npzhv2-Mx3iB7iHQIuBmtt7Wiw" >
    </script>
    <!-- Follow -->
    <script type="text/javascript">
        /** 
         * Images used on the map.
         * @author Esa 2008, RBell modified 2009
         */
        var images = [
            "http://maps.google.com/mapfiles/marker.png",
            "http://maps.google.com/mapfiles/dd-start.png",
            "http://maps.google.com/mapfiles/dd-end.png"
        ];
        /** 
         * follow tracks the marker on the map.  If the marker is dragged off
         * map it is deleted.
         * @author Esa 2008, RBell modified 2009
         * @method follow
         * @param (int) The image ID.
         * @return none
         */
        function follow(imageInd){
            var marker;
            var dog = true;
            var noMore = false;
            var mouseMove = GEvent.addListener(GW.MapPanel._map, 'mousemove', function(cursorPoint){
                if(!noMore){
                    marker = new GMarker(cursorPoint,{draggable:true, autoPan:false});
                    // here need to remember the marker
                    map.addOverlay(marker);
                    marker.setImage(images[imageInd]);
                    noMore = true;
                    // This function deletes the marker when dragged outside map
                    GEvent.addListener(marker, 'drag', function(markerPoint){
                        if(!GW.MapPanel._map.getBounds().containsLatLng(markerPoint)){
                            GW.MapPanel._map.removeOverlay(marker);
                            // here need to delete the marker
                        }
                    });
                };
                if(dog){
                    marker.setLatLng(cursorPoint);
                }
            });
            var mapClick = GEvent.addListener(GW.MapPanel._map, 'click', function(){
                dog = false;
                // 'mousemove' event listener is deleted to save resources
                GEvent.removeListener(mouseMove);
                GEvent.removeListener(mapClick);
            });
        }
    </script>
    <!-- Page load/unload -->
    <script type="text/javascript">
        /** 
         * follow tracks the marker on the map.  If the marker is dragged off
         * map it is deleted.
         * @author Esa 2008, RBell modified 2009
         * @method follow
         * @param (int) The image ID.
         * @return none
         */
        var mapVisible = true;
        function toggleMap(){
            if( mapVisible ){
                mapVisible = false;
                GW.MapPanel.hide();
            } else {
                mapVisible = true;
                GW.MapPanel.show();
            };
        };
        // wikiedit page onload
        GW.PageOnload = function() {
            GW.PageInitMap();
            GW.PageInitEditForm();
        };
        // Init map.  See Google Map docs.
        GW.PageInitMap = function(){
            GW.MapPanel = GW.Panel.NewPanel('idMap', {
                x: 600,
                y: 120,
                width: '600px',
                height: '600px',
                visible: true,
                close: false
            });
            GW.Panel.Resize( GW.MapPanel );
            if (GBrowserIsCompatible()) {
                GW.MapPanel._map = new GMap2(document.getElementById("idMapBD"));
                map = GW.MapPanel._map;  // todo: fix this
                GW.MapPanel._map.addMapType(G_PHYSICAL_MAP);
                GW.MapPanel._map.setCenter(new GLatLng(37.0, -85.0), 5, G_PHYSICAL_MAP);
                GW.MapPanel._map.addControl(new GLargeMapControl());
                GW.MapPanel._map.addControl(new GMapTypeControl());
                GW.MapPanel._map.addControl(new GScaleControl());
                GW.MapPanel._map.addControl(new GOverviewMapControl ());
                GW.MapPanel._map.enableGoogleBar();
            } else {
                alert('Browser not compatable with Google maps!')
            };
        };
        // Init the edit form
        GW.PageInitEditForm = function(){
            // init tinyMCE
            GW.Log( 'tinyMCE.init', 'info', 'GW' );
            tinyMCE.init( GW.TinyMCEConfig );
            // connect map toggle button
            YAHOO.util.Event.addListener("idMapToggleBTN", "click", GW.Panel.Show, GW.MapPanel, true);
            GW.MakeTT( 'idMapToggleBTN', 'Show/hide map' );
        };
        // Tiny MCE configuration used by GW.  See tinyMCE configuration docs.
        GW.TinyMCEConfig = {
            mode : "exact",
            elements : "idPageContent",
            theme : "advanced",
            // Theme options
            theme_advanced_toolbar_location : "top",
            theme_advanced_toolbar_align : "left",
            theme_advanced_statusbar_location : "bottom",
            theme_advanced_resizing : true,
            // theme_advanced_resize_horizontal : false,
            // Setup plugins and buttons
            plugins: "safari,style,table,advimage,advlink,emotions," + 
                "inlinepopups,insertdatetime,preview,media,searchreplace,print," + 
                "contextmenu,paste,directionality,fullscreen,noneditable,visualchars," + 
                "nonbreaking,xhtmlxtras,template",
            theme_advanced_buttons1 : "bold,italic,underline,strikethrough,styleprops,|,"+
                "justifyleft,justifycenter,justifyright,justifyfull,|,"+
                "styleselect,formatselect,fontselect,fontsizeselect,help,",
            theme_advanced_buttons2 : "bullist,numlist,|,outdent,indent,blockquote,|," + 
                "insertdate,inserttime,preview,|,forecolor,backcolor,|," + 
                "link,unlink,anchor,image,|,cite,abbr,acronym,del,ins,|," + 
                "visualchars,nonbreaking,template,blockquote",
            theme_advanced_buttons3 : "tablecontrols,visualaid,|,"+
                "hr,|,charmap,emotions,media,|,"+
                "print,|,ltr,rtl,|,fullscreen",
            theme_advanced_buttons4 : "cut,copy,paste,pastetext,pasteword,|,"+
                "search,replace,|,undo,redo,|,code,removeformat,cleanup,",
            // Use our CSS
            content_css : "/static/css/base.css",
            // Our templates
            // templates
            template_templates: [
                { title: "Anchorage",
                  src: "/static/wikitemplates/two.html",
                  description: "A basic template for describing an anchorage"
                }
            ]
        };
        // GUnload to prevent memory leaks on page unload.
        GW.PageOnUnload = function(){
            GUnload();
        };
    </script>
{% endblock %}

{% block BaseBrowserTitle %}
Edit Wiki Page - {{ page.wiki_title }}
{% endblock %}

{% block BasePageTitle %}
    Edit Wiki Page - {{ page.wiki_title }}
{% endblock %}

{% block BaseBody %}
    <div style="clear:both; position: relative; height: 700px;" >
    <div style="width: 50%; position: absolute; top: 0px; left: 0px;">
    <form action="/wikisave/{{ page.wiki_title }}" method="POST">
        <div style="width:100%" style="margin-bottom:0.4em" >
            <input type="submit" value="Save Changes"  />
            <img id="idMapToggleBTN" src="/static/img/wikimap.png" style="border-style: none; verticle-align: middle;" />
        </div>
        Page Title: 
        <input type="text" name="title" value="{{ page.title }}" 
            style="width:80%; margin-bottom:0.4em" />
        <div style="clear: both;" >
            <textarea id="idPageContent" rows="37" name="body" style="width: 99%" >{{ page.content }}</textarea>
        </div>
    </form>
    </div>
    <div id="idMap" style="visibility:hidden" >
        <div class="hd">Wiki Page Map
            <a class="marker" href="javascript:follow(0)">
                <img src="http://maps.google.com/mapfiles/marker.png" alt="" title="click me" class="pushpin"/>
            </a>
            <a class="marker" href="javascript:follow(1)">
                <img src="http://maps.google.com/mapfiles/dd-start.png" alt="" title="click me" class="pushpin"/>
            </a>
            <a class="marker" href="javascript:follow(2)">
                <img src="http://maps.google.com/mapfiles/dd-end.png" alt="" title="click me" class="pushpin"/>
            </a>
        </div>
        <div id="idMapBD" class="bd" style="overflow: auto">
            <noscript>You should turn on JavaScript</noscript>
        </div>
        <div class="ft">Wiki Page Map</div>
    </div>
    </div>
{% endblock %}
